<template>
  <el-dialog title="条码打印"
             v-if="showFlag"
             :visible.sync="showFlag"
             :modal=false
             width="80%"
             center
  >
    <div id="printArea" style="text-align: center">
      <barcode :value="genCode" :text="genCode"></barcode>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmSelect">打 印</el-button>
      <el-button @click="showFlag=false">取 消</el-button>
    </div>
  </el-dialog>

</template>
<script>
import Barcode from 'vue-barcode';
import printJS from "print-js";

export default {
  name: 'BarcodePrint',
  components: {Barcode},
  props: {
    genCode: undefined
  },
  data() {
    return {
      showFlag: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      genCodes: this.genCode,
    }
  },
  created() {
  },
  methods: {
    //确定选中
    confirmSelect() {
      printJS({
        type: 'html',
        printable: 'printArea',
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      });
    },
  }
}
</script>
